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Sanksi Pelanggaran Pasal 113 
Undang-Undang Nomor 28 Tahun 2014 
tentang Hak Cipta 


1. Setiap Orang yang dengan tanpa hak melakukan pelanggaran hak ekonomi 
sebagaimana dimaksud dalam Pasal 9 ayat (1) huruf i untuk Penggunaan 
Secara Komersial dipidana dengan pidana penjara paling lama 1 (satu) tahun 
dan/atau pidana denda paling banyak Rp100.000.000 (seratus juta rupiah). 


Setiap Orang yang dengan tanpa hak dan/atau tanpa izin Pencipta atau 
pemegang Hak Cipta melakukan pelanggaran hak ekonomi Pencipta 
sebagaimana dimaksud dalam Pasal 9 ayat (1) huruf c, huruf d, huruf f, 
dan/atau huruf h untuk Penggunaan Secara Komersial dipidana dengan 
pidana penjara paling lama 3 (tiga) tahun dan/atau pidana denda paling 
banyak Rp500.000.000,00 (lima ratus juta rupiah). 


Setiap Orang yang dengan tanpa hak dan/atau tanpa izin Pencipta atau 
pemegang Hak Cipta melakukan pelanggaran hak ekonomi Pencipta 
sebagaimana dimaksud dalam Pasal 9 ayat (1) huruf a, huruf b, huruf e, 
dan/atau huruf g untuk Penggunaan Secara Komersial dipidana dengan 
pidana penjara paling lama 4 (empat) tahun dan/atau pidana denda paling 
banyak Rp1.000.000.000,00 (satu miliar rupiah). 


Setiap Orang yang memenuhi unsur sebagaimana dimaksud pada ayat (3) 
yang dilakukan dalam bentuk pembajakan, dipidana dengan pidana penjara 
paling lama 10 (sepuluh) tahun dan/atau pidana denda paling banyak 
Rp4.000.000.000,00 (empat miliar rupiah). 
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Kata Pengantar 


Sekarang ini, website lazim diakses dari berbagai platform, mulai dari 
komputer desktop sampai piranti mobile. Desainer web dan para pengelola 
website seharusnya dapat melihat tren ini. Website modern harus mengako- 
modasi kebutuhan berinternet para pengguna beragam piranti smartphone. 


Buku ini membahas tren baru dalam pengembangan web, yaitu Responsive 
Web Design (RWD) dengan menggunakan tool HTML5 dan CSS3. Melalui 
teknik desain web responsif, secara cepat dan praktis Anda dapat menyulap 
website Anda untuk dapat diakses dari berbagai platform piranti, tanpa 
harus mengembangkan aplikasi-aplikasi tersendiri untuk tiap jenis platform 
piranti. 


Penulis menyadari bahwa buku ini tidak luput dari kesalahan dan masih jauh 
dari sempurna. Untuk itu, penulis membuka diri untuk segala bentuk 
tanggapan dan pertanyaan pembaca berkaitan dengan buku ini. Untuk ber- 
konsultasi secara langsung dengan penulis, silakan layangkan email ke 
winarno@smitdev.com atau ali@smitdev.com. 


Semarang, Desember 2014 


Edy Winarno ST, M.Eng 
Ali Zaki 
SmitDev Community 
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BAB 


Pendahuluan 


Cara membuat website sudah berkembang sangat pesat sejak 
pertama kali WWW menjadi massal sekitar 20 tahun ke belakang. 
Pada tahun 1990, website umumnya dikembangkan menggunakan 
tabel sebagai alat bantu untuk menata konten di dalamnya. Di bab 
ini akan dijelaskan bagaimana perkembangan website sampai era 
pengembangan website responsif. 


1.1 Sejarah Pengembangan Website 


Walaupun spesifikasi CSS sudah dirilis sejak tahun 1996, tapi CSS 
baru banyak diimplementasikan untuk membuat website di tahun 
2003-an. Ini membuat banyaknya kode CSS yang dipakai untuk 
membuat website, di mana CSS ini memungkinkan tampilan 
website berubah drastis walaupun tanpa mengutak atik kode HTML 
utamanya. 
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Dengan perkembangan komputer lebih lanjut, maka muncul layar 
dengan resolusi lebih besar, sehingga pembuat website pun mulai 
menyasar layar dengan resolusi 1024 x 800, di mana makin 
banyak ruang kosong di layar. Sehingga kalau dibuat standar, 
maka kalau dibuka di layar besar akan banyak ruang kosong, 
sementara kalau dibuka di layar kecil akan perlu scrolling untuk 
mengecilkannya. 


Lalu smartphone pun makin populer, dimulai dengan adanya 
iPhone di tahun 1997, dan web juga menjadi sesuatu yang lazim 
diakses di smartphone, sehingga sebuah website harus bisa 
responsif, yaitu bisa merespon alat pengaksesnya, dari mulai layar 
lebar, hingga layar kecil smartphone. 


Pada tahun 2010, CSS3 mulai diimplementasikan di browser 
piranti mobile. Dari mulai Android 2.1, dan diikuti dengan iOS 3.2. 
Adanya guery media memungkinkan pembuatan website untuk 
berbagai target di berbagai resolusi yang ada. 


Selain perubahan ukuran layar, ada juga peningkatan kualitas 
layar yang digunakan, misalnya resolusi DPI menjadi lebih tinggi, 
sehingga lebih baik menggunakan tampilan DPI tinggi agar website 
terlihat bagus di piranti mobile. Untuk menangani hal ini, diguna- 
kanlah metodologi pengembangan website responsif atau lazim 
disebut Responsive Web Design. 


Website responsif ini menjadi tren sekarang ini. Di bab ini akan 
dijelaskan pendahuluan mengenai desain responsif, apa, dan 
bagaimana desain responsif. 


1.1.1 Apa Itu Desain Responsif 


Istilah responsif berkaitan dengan bagaimana browser merespon 
lingkungan sekitarnya. Jadi, desain responsif berkaitan bagaimana 
sebuah website dikembangkan, sehingga bisa menyesuaikan 
dengan lingkungan pengaksesnya, apakah browser, piranti, atau 
ukuran layar yang digunakannya. 


Jadi pendekatan desain responsif akan membuat layout website 
mudah diadaptasi menggunakan grid yang fleksibel, konten yang 
fleksibel (seperti image, video, dan teks) serta guery media CSS3. 
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Gambar 1.1 Desain responsif, memberikan tampilan yang responsif 
terhadap semua jenis browser di berbagai piranti 


Desain responsif akan menghindari unit yang fix seperti piksel, dan 
menggunakan unit yang relatif seperti prosentase. Ini artinya, lebar 
dari beberapa bagian dari website merupakan prosentase dari 
viewport. 


Yang dimaksud dari desain responsif adalah bahwa semua display 
harus menerima konten yang sama, namun dibangun dengan 
fleksibel, sehingga mengoptimalkan tampilan untuk tiap piranti. 


1.1.2 Kenapa Piranti Mobile Sangat Penting 


Dengan tren smartphone, kini semua orang bisa mengakses 
internet dengan jauh lebih mudah karena tinggal mengambilnya 
dari kantong atau tas, tidak perlu repot menyalakan, dan 
menunggu loading sistem operasi yang sangat lama, apabila 
mengakses website dari komputer. 


Pasar smartphone kini membesar, riset menunjukkan bahwa di 
tahun 2013 saja, penjualan smartphone hampir 604 dari total 
penjualan ponsel, tren ini terus meningkat di mana nantinya 
hampir semua ponsel yang dijual adalah yang berjenis 
smartphone. 
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“FrBlackBerry 


Gambar 1.2 Beragam piranti mobile 


Konsekuensinya, nanti akan lebih banyak orang yang mengakses 
website dari browser di smartphone daripada di komputer. 
Sehingga, tren ini tidak boleh disepelekan. Kedepannya, meng- 
akses internet via ponsel akan lumrah, dan lebih lazim daripada 
mengakses internet via piranti lainnya. 


Piranti mobile memiliki potensi untuk hadir di mana-mana, bahkan 
menggantikan komputer desktop. Sekarang ini, Anda bisa mem- 
beli tablet dengan harga kurang dari 500 ribu rupiah dan juga 
smartphone dengan harga kurang dari 300 ribu rupiah. Sehingga 
biaya untuk memiliki atau cost entry-nya jauh lebih murah. 


Terlebih, antarmukanya yang touch screen membuat lebih intuitif 
untuk dipakai dibandingkan piranti desktop atau notebook. Piranti 
komputer desktop juga kurang optimal karena kalau kelamaan 
dipakai, akan membuat tangan dan bahu menjadi pegal, kurang 
ergonomis. 


Indikator lain dari makin populernya piranti mobile adalah pen- 
jualan untuk komputer sudah makin jenuh, sementara penjualan 
untuk piranti mobile masih terus berkembang. 


1.1.3 Desain Responsif vs Desain Gadget Khusus 


Piranti mobile tumbuh luar biasa pesat, mungkin Anda bertanya 
kenapa tidak membangun website yang khusus mobile saja, 
khusus platform yang menjadi target. Misalnya, membuat website 
khusus mobile seperti memakai ekstensi m.domain.com? 
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Ketika membandingkan desain responsif dan desain yang khusus 
platform tertentu, Anda perlu mengetahui keunggulan desain 
responsif. Yang pertama lebih murah dan mudah dalam menerap- 
kan konten, dan desain kalau kode dasarnya sama. Jadi, Anda 
bisa menampilkan konten yang seragam bahkan di versi cetak, 
online, desktop, atau piranti mobile. Jadinya UX (user experience) 
yang bagus akan membutuhkan integerasi platform yang baik. 


Salah satu keuntungan utama desain web responsif adalah simpel. 
Anda tidak perlu memisahkan versi mobile. Karena desain 
responsif memungkinkan Anda menggunakan url yang sama dan 
kode dasar yang sama. Dengan satu kode dasar, pengetesan 
menjadi lebih sederhana, terutama kalau Anda bekerja di tempat 
kerja yang menggunakan pengembangan test-driven. Di mana, 
dua kode bisa menyebabkan pengetesan menjadi lebih repot. 


Misalnya situs http://www.penjejak.com, sebuah situs pencarian 
yang dikembangkan oleh smitdev.com yang ketika ditampilkan di 
tampilan full screen terlihat seperti berikut. 


Web Berita Direktori Belanja Alamat 
Adojan 25 


PN 


Mesin Pencari Situs Internet Asli dari Indonesia, untuk orang Indonesia. 


Gambar 1.3 Tampilan awal situs pencari Indonesia, Penjejak.com 


Ketika ukuran browser dikecilkan setengah, maka tampilan 
berubah, yang secara fisik disebabkan konfigurasi CSS yang 
menargetkan width memang berubah. Ini ditujukan untuk 
pengguna piranti layar sedang seperti tablet. 
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Penjejak Situs Web - Mes 


c Cc www.penjejak.com ak 


Jumat, 28 November 2014 | Masuk 


.COM 
rita Direktori Belanja Alamat 
(Pencarian web 


Mesin Pencari Situs Internet. Asli dari Indonesia, untuk orang Indonesia 


Penjejak.com - Search Engine 


Gambar 1.4 Tampilan browser kondisi setengah 


Ketika diubah ke ukuran kecil, maka tampilan situs mengecil 
seperti di tampilan piranti ponsel. 


| 4 Penjejak Situs Web - Mes 


5 Cc 


Web Berita Direkton Belanja Alamat 


ea 


Mesin Pencari Situs Internet. Asli dari Indonesia 
untuk orang Indonesia. 


Penjejak.com 


Gambar 1.5 Browser menjadi ukuran kecil 
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Kesederhanaan dari desain kode responsif adalah Anda tidak perlu 
mengelola lebih dari satu konten, sehingga lebih menghemat uang, 
dan waktu pemrograman Anda. Selain itu, website dengan desain 
responsif juga lebih optimal ditinjau dari sisi SEO oleh mesin 
pencari dibandingkan desain website yang terpisah. Google 
merekomendasikan desain web responsif dengan beberapa catatan 
seperti berikut: 


e URL tunggal untuk konten yang membuat user lebih 
mudah berinteraksi dan berbagi konten. 


e URL tunggal untuk konten membuat algoritma Google 
lebih mudah mengindeks situs. 


e Tidak ada redirection atau pendeteksian piranti di server 
yang membuat proses loading menjadi lebih cepat. 


e GoogleBot akan meng-crawl situs sekali dan tidak ber- 
ulang kali seperti halnya situs dengan multi versi. 


1.1.4 Desain Web Responsif Tidak Terbatas Hanya 
di Piranti Mobile 


Desain web responsif tidak hanya terbatas untuk piranti mobile 
saja, hampir semua platform bisa mengambil manfaat dari desain 
web responsif. Apalagi sekarang ini yang digunakan untuk melihat 
internet tidak cuma piranti mobile saja, tapi ada televisi, konsol 
game, dan lain sebagainya. Sekarang ini, hampir semua konsol 
game memiliki web browser untuk mengakses website. 


Dengan menggunakan teknik responsif, Anda bisa memanfaatkan 
desain responsif untuk diakses melalui berbagai platform. Di 
negara-negara maju, umumnya televisi dan piranti game sudah 
terhubung ke internet. Ini menyebabkan banyak sekali platform 
yang berbeda-beda, bahkan di satu piranti dari satu pabrikan 
sekalipun (seperti iPad dan iPhone) memiliki berbagai variasi 
resolusi layar. 


Berikut ini contoh variasi untuk resolusi layar. 
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1080p display 


IFad Landscape IM 


IPhone 5/SS Portrait 


IPhone Portrait 


Gambar 1.6 Contoh resolusi di piranti apple 


Contoh di atas, satu pabrikan saja bisa memiliki berbagai resolusi 
yang perlu didukung, apalagi pabrikan piranti ada lebih dari satu, 
sehingga memakai desain responsif sangat menghemat. 


1.1.5 Kapan Tidak Menggunakan Desain Responsif 


Walaupun desain responsif sangat berguna, tapi tidak semuanya 
bisa diterapkan desain responsif. Misalnya, pada kondisi ketika 
aplikasi web dibuat untuk memberikan pengalaman pemakaian 
seperti aplikasi desktop. Misalnya Google Docs, jika menggunakan 
ukuran layar yang kecil, Google Docs tidak optimal. 


ll 
7 (EI Data Perusahaan x 


c CB https://docs.google.com/spreadsheet/ccc?k zF6w5 CaEdGppSUNYZGUxMKRE 77 | 5 
| Data Perusahaan | Ali Zak 
File Edit View Insert Format Data Tools Fom Help La panen sa | & siar | 
| 
BAAP 3 113 Arial 10 B Z7 S$ A- More 
$ Timestamp 
A B c D E F 
5 Status hukum 
Timestamp | perusahaan?  Omzetperbulan? Nama direktur? 
2 | 3/26/2011 19:33:50 PT 3 Ketih McDonald 
33/26/2011 19:34:19 UD 1| Ramdhani 
4 3026/2011 19:34:47 PT 4 Luke Joe 


Gambar 1.7 Aplikasi di web seperti Google Docs 
tidak cocok untuk Desain Responsif 
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Apalagi kalau ukuran web sangat besar, maka basis kodenya perlu 
dicek ulang apakah bisa diubah ke desain responsif atau tidak. 
Jika basis kode terlalu bloatware, maka perlu dirampingkan ter- 
lebih dahulu baru kemudian diset menggunakan desain responsif. 


1.1.6 Memahami Viewport 


Salah satu konsep penting di desain responsif adalah viewport. 
Viewport adalah tampilan di mana Anda melihat website Anda. 
Sebelum HTML5 dan CSS3, umumnya sebuah website dilihat 
dalam ukuran browser yang digunakan. 


Pada umumnya ukuran browser pada saat itu adalah 1024 x 800 
pada saat full screen, dan ketika itu website umumnya dibuat 
menggunakan panjang sekitar 960 px hingga 980 px. 


Ketika awal munculnya piranti mobile, para pabrikan agak 
bingung menghadapi hal ini, di mana ukuran website pada umum- 
nya fix dan lebih besar dari ukuran layar piranti mobile. 


Solusinya adalah dengan mengeset viewport lebih besar dari lebar 
piranti, sehingga website akan diskala menjadi lebih kecil. Jadi 
pengunjung akan men-zoom konten untuk melihat lebih detail. 


Agar developer bisa mengendalikan width viewport, ada meta tag 
baru yang diperkenalkan yang memungkinkan lebar, dan skala 
awal viewport bisa diset. Jadi Anda bisa mengeset browser mobile 
untuk me-render situs pada berbagai lebar viewport. 


Berikut ini contoh viewport width, dan height relatif pada jendela 
browser. 


c #.06e 


viewport 
height 


viewport width 


Gambar 1.8 Width, dan Height dari Viewport 
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1.1.7 Breakpoint 


Selain viewport, Anda perlu memahami apa itu breakpoint. Break- 
point di desain responsif adalah nilai lebar, di mana website akan 
mengubah layout berdasarkan deklarasi media guery. 


Umumnya, situs responsif memiliki dua atau lebih breakpoint, 
tergantung kepada breakpoint yang ditujukan untuk piranti 
tertentu. Beberapa breakpoint yang digunakan adalah: 


e Piranti sangat kecil, misalnya telepon («768px). 
e Piranti kecil, misalnya tablet (»768px, dan «992px). 


e Piranti medium, misalnya untuk netbook dan komputer 
desktop (»992px, dan «1200px). 


e Piranti besar, seperti komputer desktop (»1200px). 


Selain breakpoint, terminologi yang perlu Anda ketahui adalah 
State, yaitu versi website di antara tiap breakpoint. Jadi piranti 
mobile, tablet, dan desktop adalah state Anda, di antaranya ada 2 
break point. Perlu memahami bahwa guery media merespon width 
dari viewport dan bukannya width dari layar, sehingga Anda bisa 
dengan mudah mengatur browser untuk mengetes breakpoint. 


1.2 Fitur Baru HTML 5 dan CSS 3 


Desain web responsif dibangun di atas HTML5 dan CSS 3. 
Sebelum membahas ke tahapan desain responsif, Anda perlu 
melihat beberapa fitur baru dari HTML 5, dan CSS 3 ini. 


HTML 5 adalah spesifikasi terbaru dari bahasa HTML yang 
disetujui oleh W3C (World Wide Web Consortium). Spesifikasi 
HTML 5 adalah bagian dari framework lebih besar yang disebut 
“Open Web Platform” oleh W3C. Framework ini memungkinkan 
semua orang membuat website, dan aplikasi web yang bisa 
dijalankan di platform web manapun. 


Ada banyak keunggulan HTML 5 dibandingkan versi sebelumnya, 
antara lain: 


e Aksesibilitas: HTML 5 memudahkan Anda membuat situs 
lebih aksesibel. Semantik tag baru dari HTML 5 memung- 
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kinkan screen reader untuk lebih mudah mengidentifikasi 
tipe konten. Ini memudahkan untuk menyediakan user 
experience yang lebih baik. HTML 5 juga mendukung ARIA 
(Accessible Rich Internet Application) data role, yang 
memungkinkan Anda mengalokasikan role ke bagian 
konten dari section. Ini sangat berguna terutama kalau 
Anda meng-update konten halaman menggunakan Java- 
Script, karena Anda bisa mendefinisikan role ARIA yang 
memperlihatkan bagian dari halaman untuk pengubahan 
dan menotifikasi user. 


e Dukungan Video, dan Audio: HTML 5 memiliki dukungan 
natif untuk codec audio, dan video. Salah satu keuntung- 
annya, ini lebih mendukung piranti mobile karena bekerja 
di browser tanpa plugin seperti Adobe Flash. 


e Storage Lebih Baik: Sebelum HTML 5, satu-satunya cara 
untuk menyimpan data di client side adalah dengan 
menggunakan cookies, cara ini memiliki kekurangan 
karena objek ini juga dikirim ke server walaupun tidak 
digunakan di server. HTML 5 memperkenalkan penyim- 
panan DOM (Document Object Model). Keuntungan DOM 
adalah data tetap ada di client side, sehingga tidak mem- 
engaruhi ukuran HTTP reguest dan memungkinkan Anda 
menyimpan data lebih banyak. Saat ini, DOM storage me- 
mungkinkan menyimpan data hingga 5 MB per domain. 


e Interaksi baru: API JavaScript baru dari HTML 5 memung- 
kinkan Anda menambahkan interaksi baru, misalnya ada 
API baru seperti drag dan drop, geolocation, dan history. 
Tujuan dari interaksi baru ini untuk memungkinkan Anda 
membangun aplikasi yang lebih kaya dan lebih mudah 
pengaksesan antarmukanya. 


e Canvas: HTML 5 memperkenalkan elemen canvas, ini 
adalah tag baru HTML 5 yang bisa digunakan untuk 
drawing, ini memungkinkan Anda membangun aplikasi 
internet yang kaya, mirip dengan Adobe Flash. 


e# Mobile: HTML 5 megenalkan beberapa perkembangan baru 
untuk piranti mobile, seperti tag viewport yang memung- 
kinkan Anda menentukan width viewport serta setting 
zoom-nya. Ada juga tag yang spesifik untuk piranti tertentu 
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yang memungkinkan developer berinteraksi dengan fitur 
browser spesifik, misalnya menggunakan tag meta, 
developer bisa memberitahukan iOS bahwa jika di-book- 
mark di homepage, harus ditampilkan sebagai aplikasi full 
screen. 


1.21 Mengeset Browser untuk Simulasi 


Untuk mencoba beberapa kode HTML dan CSS saat berlatih di 
buku ini, idealnya Anda mencoba menggunakan beberapa piranti. 
Tapi Anda tidak perlu membeli piranti satu demi satu, karena 
browser Chrome menyediakan fasilitas simulasi browser piranti 
mobile. Cara mengaktifkannya seperti berikut: 


1. Klik pada tombol Options, kemudian klik pada menu Atur 
lainnya » Alat pengembang. 


lontar ea 


Tab baru 

Jendela baru 

Jendela penyamaran baru 
Bookmark 


Tab Baru-baru Ini 
Edit Potong Salin Tempel 


Simpan laman sebagai 
Temukan. 


Cetak. 


Masuk ke Chrome 


Setelan 
Tentang Google Chrome 


Bantuan 


gas 


Menghapus data penjelajahan. 


Lihat sumber 


Is 


Konsol JavaScript 


Periksa perangkat 


Gambar 1.9 Klik menu Alat pengembang 
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2. Di bagian bawah langsung muncul Element Inspector, 
Anda bisa klik pada tombol ikon Toggle device mode. 


Google 


Indonesia 


a Ig |Elements| Network Sources Timeline Profiles Resources Audits Console 


" aria-hiddens"true" styles"display: none: "»..c/iframe 


Gambar 1.10 Toggle device mode 


3. Di bagian atas langsung muncul simulasi piranti mobile. 


& L. Irlementsl Network 


pebass sa ENI 


Gambar 1.11 Simulasi piranti mobile 
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4. Anda bisa memilih piranti yang disimulasikan dengan 
memilih pada combobox Device. 


- - 


z8: Apl Untuk akses yang cepat, tempatkan bookmark pada bilah bookmark. Impor book 


renderin 


Console 


Mid" 


Gambar 1.12 Memilih piranti dengan memilih 
combobox Device 


5. Maka muncul browser sesuai piranti device yang diingin- 
kan. 


2 Apl Untuk akses yang cepat, tempatkan bookmark pada bilah bookmark. Impor bookmark sekarang... 


Gambar 1.13 Browser berubah sesuai piranti yang dipilih 
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6. Anda bisa mengubah tampiilan fit atau tidak, kalau fit akan 
sesuai dengan jendela yang dibuka, kalau tidak maka akan 
sesuai ukuran piksel sebenarnya. 


( 3 mes 
Tab Baru x 


Cc facebook.com - 


35! Apl Untuk akses yang cepat, tempatkan bookmark pada bilah bookmark. Impor bookmark sekarang... 


Gambar 1.14 tampilan berubah ketika ukuran browser 
diperbesar, tapi diset ke Fit 


1.2.2 Simulator Android dan Firefox Emulator 


Anda juga bisa menggunakan Android Emulator untuk mencoba 
kode-kode di buku ini. Caranya seperti berikut: 


1. Download Android SDK dari 
http://developer.android.com/sdk. 


2. Ekstrak file zip tersebut ke C: Program FilesVAndroid. 
3. Jalankan SDK Manager.exe. 


Adapun untuk menjalankan simulator di Firefox, Anda perlu 
melakukan langkah-langkah berikut ini: 


1. Jalankan firefox. 


2. ketikkan “about:app-manager” di kotak url. 
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(tie taat Yiew Hutory Bookmarks Too Help aa aa n/?j53 tenan Sem 


App Manager 4 


& sboutapp-manager To 4 kr 3 


Add Packaged App 


Add Hosted App 


ji ' Gonmectto localhost6000 Stan Sa 


Start an anctanre nd the Senulatnr ani cannert ina 


Gambar 1.15 Halaman about:app-manager 


3. Di bagian bawah, klik Start Simulator. Karena belum ada, 
akan muncul tombol Install Simulator, klik tombol 


tersebut. 
(Pble Eaa View Hutory Bookmarks Tools Help - | 
J App Manager 4 
« #bowtagpmonegar rosa E| 
| | 
| A 


Add Packaged App 


@ Add Hosted App 


Install Simulajor |” Cance 


Gambar 1.16 Klik pada Install Simulator 


4. Muncul beberapa versi simulator, pilih versi terakhir yang 
stabil. 
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Man Yaa Kepang Meem To We 
au, R9 tenan A00 Menag «NG 
ta maan rosa. 


App manager add-ons .... 


Firefox OS Simulator and ADB Add-On Helper 


Gambar 1.17 Pemilihan versi terakhir Firefox simulator 


5. Tunggu hingga file di-download dan diinstal. 


File Edit View History Bookmarks Tools Help 
'App Manager KR) IP Firefox OS App Manager A... Xx | dh 


€ ik M hitps//ftp.mozilla.org/pub/mozilla.org/labs/fxos-simulator 


oa Add-on downloading si D r al 
|@ | 


Unknown time remaining — 0 bytes (0 bytes/sec) 


CN IN W73 & MATALYT OT 7 DB Add 


Gambar 1.18 File di-download dan diinstal 


6. Jalankan lagi program, kemudian jalankan Firefox OS 
Simulator. Akan muncul tampilan seperti contoh berikut. 


Gambar 1.19 Tampilan OS Simulator di Firefox 
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